<template>
    <div class="title">授课课程信息</div>
    
    <div class="courseList" style="margin-top: 20px">
        <span>我的课程：</span>
        <template v-if="isListLoad">
            <el-table :data="tableData" border style="width: 100%">
                <el-table-column prop="departmentName" label="开课单位" width="230"/>
                <el-table-column prop="courseId" label="课程编号" width="180"/>
                <el-table-column prop="courseName" label="课程名称"/>
                <el-table-column prop="courseHour" label="总学时"/>
                <el-table-column prop="credits" label="学分"/>
                <el-table-column prop="type" label="课程类别"/>
            </el-table>
        </template>
    </div>

</template>

<script setup lang="ts">

// optional styles

import {onMounted, ref} from "vue";
import {getTeacherCourseStandard} from "@/service/teacher/teacher.service";

const isListLoad = ref(false)
const tableData = ref([])

onMounted(() => {
    getTeacherCourseStandard((data: any) => {
        let courseIdList: string[] = ['']
        // 当前教师课程列表
        console.log(data)
        let teacherCourseStandardList = data.teacherCourseStandardList
        for (const teacherCourseStandard of teacherCourseStandardList) {
            // 重复课程判断
            if (!courseIdList.includes(teacherCourseStandard.courseId)) {
                courseIdList.push(teacherCourseStandard.courseId)
                tableData.value.push(teacherCourseStandard)
            }
        }
    })
    
    isListLoad.value = true
})


</script>


<style scoped>
.title {
    font-size: 20px;
    margin-bottom: 10px;
}

.option {
    margin-bottom: 20px;
}
</style>